{% extends "backend/base.html" %}

{% block title %}Daily Plan{% endblock %}

{% block head_css %}
<link href="/static/css/bootstrap-datepicker.css" rel="stylesheet" />
{% endblock %}

{% block head_script %}
<script type="text/javascript" src="/static/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/js/daily-plan.js"></script>
{% endblock %}

{% block main_content %}
<div class="row">
    <div class="span2">
        <div class="well" style="padding: 8px 0;">
            <ul class="nav nav-list">
                <li class="nav-header">Statistics</li>
                <li>
                    <a href="/backend/stat/member">Members</a>
                </li>
                <li>
                    <a href="/backend/stat/sale">Sales</a>
                </li>
                <li>
                    <a href="/backend/stat/product">Products</a>
                </li>
                <li class="nav-header">Prediction</li>
                <li>
                    <a href="/backend/pred/product">Products</a>
                </li>
                <li>
                    <a href="/backend/pred/member">Members</a>
                </li>
                <li class="nav-header">Planning</li>
                <li>
                    <a href="/backend/plan/weekly">Weekly Plan</a>
                </li>
                <li class="active">
                    <a href="/backend/plan/daily">Daily Plan</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="span10">
        <div class="well">
            <h2>Daily Plan</h2>
            <p>
                <div class="form-inline">
                    <label for="date-input">Select date:</label>
                    <input name="date" type="text" data-datepicker="datepicker" id="date-input" placeholder="yyyy-mm-dd" />
                    <input type="submit" class="btn btn-primary" value="Display" id="date-submit" />
                </div>
            </p>
            <button href="" class="btn btn-primary" id="show-form">Add an entry</button>
        </div>
        <div class="well" id="entry-form" style="display: none;">
            <div class="form-horizontal">
                <fieldset>
                    <legend>Add plan entry to <span class="target-date"></span></legend>
                    <div class="control-group">
                        <label class="control-label" for="input-item-name">Item Name</label>
                        <div class="controls">
                            <input name="name" type="text" id="input-item-name" data-provide="typeahead" placeholder="item name goes here" value="" class="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input-price">Price</label>
                        <div class="controls">
                            <input name="price" type="text" id="input-price" placeholder="enter price here" value="" class="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input-limit">Limit</label>
                        <div class="controls">
                            <input name="limit" type="text" id="input-limit" placeholder="enter limit here"  value="" class="text" />
                        </div>
                    </div>
                    <div class="form-actions">
                        <input type="submit" id="add-entry" class="btn btn-primary" value="Add" name="" />
                        <input type="submit" id="cancel-entry" class="btn" value="Cancel" name="" />
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
{% endblock %}
